<!--
//
// Trigger.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/11.
//
-->
<template>
    <div class="Index">
        <vxe-table
                ref="VXETable"
                :column-config="{ resizable: false}"
                :data="list"
                :row-config="{isCurrent: true, isHover: true, keyField: 'id'}"
                border
                round
                show-overflow
                size="small"
        >
            <template #empty>
                <el-empty :image-size="100"/>
            </template>
            <vxe-column align="left" field="description" :fixed="$fixedColumn('left')" title="名称" width="200"></vxe-column>
            <vxe-column field="triggerId" title="Code" width="140"></vxe-column>
            <vxe-column field="numberOfRuns" title="触发次数" width="140"></vxe-column>
            <vxe-column field="maxNumberOfRuns" title="最大触发次数" width="140"></vxe-column>
            <vxe-column field="numberOfErrors" title="出错次数" width="140"></vxe-column>
            <vxe-column field="maxNumberOfErrors" title="最大出错次数" width="140"></vxe-column>
            <vxe-column field="numRetries" title="重试次数" width="140"></vxe-column>
            <vxe-column field="retryTimeout" title="重试时间间隔(毫秒)" width="160"></vxe-column>
            <vxe-column field="args" title="参数" width="160"></vxe-column>
            <vxe-column field="status" min-width="120" title="状态">
                <template #default="{ row }">
                    <span>{{ filters.statusFilter(row.status) }}</span>
                </template>
            </vxe-column>
            <vxe-column field="startTime" title="起始时间" width="200">
                <template #default="{ row }">
                    <span>{{ filters.dateFilter(row.startTime) }}</span>
                </template>
            </vxe-column>
            <vxe-column field="endTime" title="结束时间" width="200">
                <template #default="{ row }">
                    <span>{{ filters.dateFilter(row.endTime) }}</span>
                </template>
            </vxe-column>
            <vxe-column field="lastRunTime" title="最近运行时间" width="200">
                <template #default="{ row }">
                    <span>{{ filters.dateFilter(row.lastRunTime) }}</span>
                </template>
            </vxe-column>
            <vxe-column field="nextRunTime" title="下次触发时间" width="200">
                <template #default="{ row }">
                    <span>{{ filters.dateFilter(row.nextRunTime) }}</span>
                </template>
            </vxe-column>
            <vxe-column field="startNow" title="立即启动" width="100">
                <template #default="{ row }">
                    <el-tag v-if="row.startNow">是</el-tag>
                    <el-tag v-else type="info">否</el-tag>
                </template>
            </vxe-column>
            <vxe-column field="runOnStart" title="启动立即执行一次" width="160">
                <template #default="{ row }">
                    <el-tag v-if="row.runOnStart">是</el-tag>
                    <el-tag v-else type="info">否</el-tag>
                </template>
            </vxe-column>
            <vxe-column :resizable="false" field="action" title="操作" :width="$widthColumn(140)" fixed="right">
                <template #default="{row}">
                    <table-action :actions="[
                            {title: '修改', permission: permission.edit, type: 'primary', ok: editData},
                            {title: '删除', permission: permission.delete, type: 'danger', ok: deleteData, confirm: '您确定要删除当前数据么?'},
                        ]" :data="row"/>
                </template>
            </vxe-column>
        </vxe-table>
    </div>
    <EditForm ref="editForm"/>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import * as api from "../api.js"
import EditForm from "./EditForm.vue"

const {$dayjs, $message, $fixedColumn, $widthColumn} = window;

const props = defineProps({
    list: {type: Array, default: () => []},
    options: {
        type: Object, default: () => {
        }
    }
});
const emits = defineEmits(["reload"]);

// 路由
const router = useRouter();
// store
const store = useStore();


// 当前页面功能权限
const permission = {
    add: "TaskJobTrigger:AddTaskJobTrigger",
    edit: "TaskJobTrigger:UpdateTaskJobTrigger",
    delete: "TaskJobTrigger:DeleteTaskJobTrigger"
};

// 请求query参数
const requestParams = reactive({
    orderCol: "startTime",
    isDesc: false,
    pageIndex: 1,
    pageSize: 20,
});

// 过滤器
const filters = computed(() => {
    return {
        dateFilter(val) {
            if (!val) return ""
            return $dayjs(val).format("YYYY-MM-DD HH:mm:ss")
        },
        statusFilter(val) {
            const StatusEnum = {
                0: "积压",
                1: "就绪",
                2: "正在运行",
                3: "暂停",
                4: "阻塞",
                5: "由失败进入就绪",
                6: "归档",
                7: "崩溃",
                8: "超限",
                9: "无触发时间",
                10: "未启动",
                11: "未知作业触发器",
                12: "未知作业处理程序",
            };
            return StatusEnum[val];
        },
    }
})


// 删除
async function deleteData({triggerId}) {
    if (props.options.status === 1) {
        return window.$message.error("任务正在运行中，请先停止任务");
    }
    console.log("删除: ", triggerId)
    const {success, data} = await api.DeleteTaskJobTrigger({triggerId});
    if (!success) return 0;
    reload();
    $message.success("删除成功")
}

const editForm = ref();

// 修改
function editData(row) {
    if (props.options.status === 1) {
        return window.$message.error("任务正在运行中，请先停止任务");
    }
    const args = row.args ? JSON.parse(row.args) : [];
    const strCron = args[0] || "* * * * *";
    const cronType = args[1] || 0;
    row.strCron = strCron;
    row.cronType = cronType;
    editForm.value.show({
        title: "修改",
        options: {...row},
        ok: () => {
            reload();
        }
    })
}


// 刷新
function reload() {
    emits("reload")
}


onMounted(() => {
})
</script>

<style lang="scss" scoped>
.Index {
    margin: 10px;
    width: calc(100% - 20px);
    box-sizing: border-box;

    .container {
        padding: 10px;
        background: #fff;
        margin-top: 10px;
        box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.1);
    }
}
</style>
